<template>
  <div class="xue-layout">
      <div
        class="xue-layout-item"
        v-for="(item, index) in spans"
        :key="index"
        :style="{
            flex: `0 0 ${item / 24 * 100}%`, 
        }"
        >
        
      </div>
  </div>
</template>

<script>
export default {
    props: {
        spans: {
            type: Array,
            default: () => [8, 8, 8],
        },
        editable: {
            type: Boolean,
            default: false,
        },
    }
}
</script>

<style lang="less" scoped>
.xue-layout {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .xue-layout-item {
        box-sizing: border-box;
    }
}
</style>